<template>
    <view>
        <!-- pages/myItems/myItems.wxml -->
        <view v-if="login == true">
            <!-- 失物招领与寻物启事 -->
            <view class="title">
                <view @tap="changeCategory" data-category="0" class="seek">
                    寻物启事
                    <view :class="category == false ? 'line' : ''"></view>
                </view>
                <view @tap="changeCategory" data-category="1" class="lose">
                    失物招领
                    <view :class="category == true ? 'line' : ''"></view>
                </view>
            </view>
            <view class="item-container" slot="content">
                <view v-for="(item, index) in items" :key="index">
                    <l-slide-view :height="260" :width="750" :slide-width="200">
                        <view slot="left" class="item">
                            <image class="item-image" :src="item.images[0]"></image>
                            <view class="item-middle">
                                <!-- 物品标题 -->
                                <view class="item-title">{{ item.title }}</view>

                                <view class="item-description">{{ item.description }}</view>
                                <view style="display: flex; width: auto">
                                    <!-- 物品标签 -->
                                    <van-tag type="primary">{{ item.tag }}</van-tag>
                                    <!-- 物品丢失日期 -->
                                    <view v-if="item.date != null" class="item-date">{{ item.date }}</view>
                                </view>
                                <!-- 地址 -->
                                <view v-if="item.location != null" class="item-location">{{ item.location }}</view>

                                <!-- 跳转按钮 -->
                                <view class="icon" @tap="to_item_info" :data-index="index">
                                    <image src="https://xunhang.oss-cn-beijing.aliyuncs.com/static/enter.png" mode="" />
                                </view>
                              <!--  <view slot="right" style="width: 200rpx; background-color: red" class="right">
                                    <text>删除</text>
                                </view> -->
                            </view>
                        </view>
                    </l-slide-view>
                </view>
            </view>
        </view>
        <view v-else>
            <notlogin></notlogin>
        </view>
    </view>
</template>

<script>

// pages/myItems/myItems.js

import UNI_APP from '@/.env.js'


const baseUrl = UNI_APP.BASE_URL
const app = getApp();
export default {
    
    data() {
        return {
            items: [],
            login: true,
            category: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('进入我发布的页面');
        this.getMyItems();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
       
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changeCategory(e) {
            this.category= e.currentTarget.dataset.category == 0 ? false : true

            this.getMyItems();
        },

        getMyItems() {
            var category = this.category;
            this.$http({
				url:baseUrl + '/getMyItem/' + category,
				method:'GET',
			})
                .then((res) => {
					this.items = res
                })
                .catch((err) => {
                    console.log('获取数据失败');
                });
        },

        to_item_info(e) {
            console.log(e);
            var index = e.currentTarget.dataset.index;
            var item = this.items[index];
            console.log('index:', index);
            console.log('item:', item);
            uni.navigateTo({
                url: '/pages/item-info/item-info',
                routeType: 'routeType',
                success: (result) => {
                    result.eventChannel.emit('acceptdata', {
                        data: {
                            item: item
                        }
                    });
                },
                fail: (res) => {
                    uni.showToast({
                        title: '打开页面失败'
                    });
                },
                complete: (res) => {}
            });
        }
    }
};
</script>
<style>
/* pages/home/home.wxss */

.arrow-icon {
    width: 20rpx;
    height: 200rpx;
    margin-left: 10rpx; /* 调整箭头与文本之间的距离 */
    fill: #999; /* 箭头颜色 */
}

/* 主标题 */
.title {
    display: flex;
}
.title .line {
    background-color: #ffd23c;
    height: 14rpx;
    border-radius: 35rpx;
    width: 80%;
}
.title .lose {
    margin: 30rpx;
    font-size: 38rpx;
}
.title .seek {
    margin: 30rpx;
    font-size: 38rpx;
}

.item-container {
    display: flex;
    flex-direction: column;
    width: 100%;

    border: 10rpx solid #fff;
    box-sizing: border-box;
    position: relative;
}

/* 失物信息容器样式 */
.item {
    margin: 10rpx; /* 设置外边距 */
    padding: 10rpx; /* 设置内边距 */
    border: 1rpx solid #ccc; /* 添加边框 */
    border-radius: 10rpx; /* 设置圆角 */
    box-shadow: 0 2rpx 5rpx 0 rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    display: flex;
    height: 220rpx;
    width: 100%;
    position: relative;
}

/* 图片样式 */
.item-image {
    width: 30%; /* 图片宽度占满容器 */
    height: 100%;
}

.item-middle {
    padding-top: 10rpx;
    padding-left: 20rpx;
    width: 64%;
    background-color: rgb(236, 249, 235);
    position: relative;
}

.item-title {
    color: #ff3b15; /* 设置描述文字颜色 */
    font-size: 35rpx;
}

/* 描述样式 */
.item-description {
    font-size: 30rpx; /* 设置描述字体大小 */
    margin-top: 10rpx; /* 设置上外边距 */
    width: 500rpx;

    height: auto;
}

.item-tag {
    position: absolute;
    font-size: 40rpx;
    color: #ff4500;
    left: 25rpx;
    bottom: 45rpx;
}

.item-date {
    /* background-color: RED; */
    font-size: 30rpx;
    padding-left: 20rpx;
    color: rgb(194, 189, 189);
    position: relative;
    top: 11rpx;
}
.item-location {
    bottom: 0rpx;
    right: 30rpx;
    width: auto;

    color: rgb(194, 189, 189);
}

.icon {
    width: 100rpx;
    height: 100rpx;
}

.icon image {
    width: 100%;
    height: 100%;

    position: relative;
    left: 370rpx;
    bottom: 130rpx;
}
</style>
